<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>注册</title>

    <link rel="stylesheet" href="{% static 'css/register/index.css' %}">
    <link rel="shortcut icon" href="{% static 'imgs/favicon/register_favicon.ico' %}"/>

    <style>
        #spanCss {
            width: 80%;
            position: relative;
            margin-left: 360px;

        }

        #btnCSS {
            border: 3px solid rgb(30, 60, 80);
            box-shadow: 3px 3px 3px rgb(30, 60, 80);
            color: rgb(247, 131, 110);
        }

        #btnCSS:hover {
            font-size: 18px;
            cursor: pointer;
            color: #255625;

        }

        .error-msg {
            color: red;
            font-size: 14px;
        }

        .login-btn2 {
            width: 80%;
            position: relative;
            margin-top: 90px;
            margin-left: 230px;

        }

        .login-btn2 a input:hover {
            cursor: pointer;
        }

        .red_input {
            border: 1px solid red;
        }

        .green_input {
            border: 1px solid green;
        }


    </style>
</head>
<body style="">
<canvas class="cavs" width="1366" height="609"></canvas>

<div class="loginmain">
    <div class="login-title">
        <span>注册</span>
    </div>

    <div class="login-con">
        <form id="register_form">
            {% csrf_token %}
            {% for field in form %}

                {% if field.name == 'telephone' %}
                    <label for="{{ field.id_for_label }}">{{ field.label }}
                        {{ field }}
                        <span class="error-msg"></span>
                    </label>
                    <div id="spanCss"><span id="btnCSS" onselectstart="return false;" unselectable="on">点击发送验证码</span>
                    </div>
                {% else %}
                    <div class="login-user">
                        <label for="{{ field.id_for_label }}">{{ field.label }}
                            {{ field }}
                            <span class="error-msg"></span>
                        </label>

                    </div>

                {% endif %}
            {% endfor %}
            <div class="login-btn">
                <input type="button" value="注册" id="btnRegister">
            </div>
            <div class="login-btn2">
                <a href="{% url 'login_code' %}">
                    <input type="button" value="已有账号?登录" id="btnLogin">
                </a>
            </div>
        </form>

    </div>

</div>
<script src="{% static 'js/register/jquery-1.10.2.js' %}"></script>
<script src="{% static 'js/register/jquery.min.js' %}"></script>
<script src="{% static 'js/register/ban.js' %}"></script>
<script>
    $(function () {
        tencent_sms();
        register();
    });

    // 手机号验证码发送
    function tencent_sms() {
        $('#btnCSS').click(function () {
            var telephone = $('#id_telephone').val();
            $.ajax(
                {
                    url: "{% url 'tencent_sms' %}",
                    type: "GET",
                    data: {telephone: telephone, tpl: 'register'},
                    dataType: "JSON",
                    success: function (ret) {
                        if (ret.status) {
                            // 定时器
                            smsWait();
                        } else {
                            // 渲染错误
                            $.each(ret.msg, function (key, value) {
                                $('#id_' + key).addClass('red_input').next().text(value[0])
                                // attr 只有添加的一个属性 其他的全部消失 addClass 在原有的基础上添加类
                            })
                        }
                    }
                }
            )
            // 获取焦点 input红框消失 this： 当前操作的对象
            $('input').focus(function () {
                $(this).removeClass('red_input').next().empty()
            })
        })
    }

    // 注册
    function register() {
        $('#btnRegister').click(function () {
            $.ajax({
                url: "{% url 'register' %}",
                type: "POST",
                data: $('#register_form').serialize(),
                dataType: "JSON", // 自动反序列化 ajax-- 已经自动反序列化
                success: function (ret) {
                    // console.log($('#register_form').serialize())
                    if (ret.status) {
                        // 跳转
                        window.location.href = '{% url 'login_code' %}'

                    } else {
                        // 渲染错误
                        $.each(ret.msg, function (key, value) {
                            $('#id_' + key).addClass('red_input').next().text(value[0])
                            // attr 只有添加的一个属性 其他的全部消失 addClass 在原有的基础上添加类
                        })
                    }
                }
            })
            // 获取焦点 input红框消失 this： 当前操作的对象
            $('input').focus(function () {
                $(this).removeClass('red_input').next().empty()
            })
        })
    }

    // 计时器
    function smsWait() {

        // 获取button按钮
        var $smsBtn = $('#btnCSS');

        // time = 60
        var time = 60;
        // 函数
        var remind = setInterval(function () {
            // 给button按钮添加文本
            $smsBtn.text('请等待' + time + '后,重新发送');
            // 自减
            time = time - 1;
            // 当time<1,停止函数，恢复按钮
            if (time < 1) {
                // 清除函数
                clearInterval(remind)
                $smsBtn.text('点击获取验证码');
            }
        }, 1000)
    }

</script>
</body>
</html>